<template>
  <div>
    <el-row>
      <el-col :span="12">用户选择组件应用</el-col>
      <el-col :span="12">
        <el-button @click="open">选择用户</el-button>
      </el-col>
    </el-row>
    <checkUser ref="checkUser" :multiple='false' :userIds='userIds' @getUserList="getUserList"></checkUser>
    <span>使用说明：
      <ul>
        <li> multiple：是否多选 默认true 允许多选用户 </li>
        <li> userIds：数据返回查询，类型数组为用Id </li>
        <li> getUserList：选择用用户回调方法，父组件接收选择的用户 参数为数组 </li>
        <li>{{'import checkUser from "@/components/form/compound/selectUser"'}} </li>

      </ul>
    </span>
    excel 没有文件上传导入
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="'/jiangjin/excel/import'" drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
    excel 先上传再解析
    <el-upload class="upload-demo" accept=".xlsx, .xls" :headers="headers" action="/admin/sys-file/upload"
      :on-success="handleUploadSuccess">
      <el-button size="small" type="primary">先上传再解析excel</el-button>
    </el-upload>
    excel 导出
    <el-button @click="excelExportHandleDown('ExcepExportDemo')">excel导出实例</el-button>
  </div>
</template>

<script>
  import checkUser from '@/components/form/compound/selectUser'
  import {
    mapGetters
  } from 'vuex'
  import store from '@/store'
  import request from '@/router/axios'

  export default {
    components: {
      checkUser
    },
    data() {
      return {
        userIds: [1, 5, 4],
        headers: {
          Authorization: 'Bearer ' + store.getters.access_token
        },
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {},
      open() {
        this.$refs.checkUser.init();
      },
      getUserList(data) {
       //console.log(data)
      },
      /**
       * excel 导出下载
       */
      excelExportHandleDown(filename) {
        return request({
          url: '/jiangjin/excel/export',
          method: 'get',
          responseType: 'arraybuffer'
        }).then((response) => { // 处理返回的文件流
          const blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          })
          const link = document.createElement('a')
          link.href = URL.createObjectURL(blob)
          link.download = filename
          document.body.appendChild(link)
          link.click()
          window.setTimeout(function () {
            URL.revokeObjectURL(blob)
            document.body.removeChild(link)
          }, 0)
        })
      },
      handleUploadSuccess(response, file, fileList) {
        if (response.code == 0) {
          request({
          url: '/jiangjin/excel/fileDow/' + response.data.bucketName +'/' +response.data.fileName,
          method: 'get',
        }).then((response) => { // 

        })
          
        } else {
          this.$message.error('上传出错：' + response.msg)
        }
      },
    }
  }

</script>

<style scoped>

</style>
